<template>
	<view class="content">
		<view class="left">
			<view class="prolife">
				<image :src="textInfo.image" mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="title font32 fontw">
					{{textInfo.title}}
				</view>
				<view class="time font28">
					{{$u.timeFormat(textInfo.create_time, 'yyyy-mm-dd')}}
				</view>
			</view>
		</view>
		<u-parse :content="textInfo.text" :tagStyle="style"></u-parse>
		<view class="btnB">
			<view class="box">
				<view class="item" @click="give">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/technicianadd/2.png" mode="aspectFit"></image>
					</view>
					<view class="title font32" v-if="textInfo.is_zan == 0">
						点赞
					</view>
					<view class="title font32" v-if="textInfo.is_zan == 1">
						取消点赞
					</view>
				</view>
				<view class="item" @click="collect">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/technicianadd/6.png" mode="aspectFit"></image>
					</view>
					<view class="title font32" v-if="textInfo.is_collect == 0">
						收藏
					</view>
					<view class="title font32" v-if="textInfo.is_collect == 1">
						取消收藏
					</view>
				</view>
				<view class="item" @click="showPopup = true">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/technicianadd/3.png" mode="aspectFit"></image>
					</view>
					<view class="title font32">
						分享
					</view>
				</view>
			</view>
		</view>
		<clh-popup :position="position" v-model="showPopup" :canSlide="false">
			<view class="popup">
				<view class="title font28 fontw">
					分享设置
				</view>
				<view class="des font22">
					分享成功后自动上传
				</view>
				<view class="left">
					<view class="describe font28 fontw">
						文章名称
					</view>
					<view class="container font26">
						{{textInfo.title}}
					</view>
				</view>
				<!-- <view class="left">
					<view class="describe font28 fontw">
						分享作者
					</view>
					<view class="container font26">
						小乔
					</view>
				</view> -->
				<view class="text">
					<view class="describe font28 fontw">
						分享心得
					</view>
					<view class="uni-textarea">
						<textarea @blur="bindTextAreaBlur" maxlength="20" :auto-height="true" placeholder="输入本次分享心得"
							placeholder-style="font-size: 18rpx;color: #666666;" :editable="false" :disabled="false" />
					</view>
				</view>
				<button class="list_bt_sm" style="border-right:none;" open-type="share">
				<view class="btn font28">
					分享
				</view>
				</button>
			</view>
		</clh-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				textInfo: {},
				position: 'bottom',
				showPopup: false,
				summary: '',
				userInfo: {},
				coll: [{
					name: '点赞',
					icon: 'https://wx.caobenjiankang.com/image/technicianadd/2.png',
					b_icon: 'https://wx.caobenjiankang.com/image/technicianadd/7.png'
				}, {
					name: '收藏',
					icon: 'https://wx.caobenjiankang.com/image/technicianadd/6.png',
					b_icon: 'https://wx.caobenjiankang.com/image/technicianadd/5.png'
				}, {
					name: '分享',
					icon: 'https://wx.caobenjiankang.com/image/technicianadd/3.png',
					b_icon: 'https://wx.caobenjiankang.com/image/technicianadd/4.png'
				}],
				style:{
					img:'width: 100%;',
					p:'text-align: center;',
					span:'text-align: center;'
				}
			};
		},
		onLoad(op) {
			this.id = op.id
			this.getData(op.id)
			this.getuserInfo()
		},
		onShareAppMessage() {
			let path = '/technicianadd/pages/text/text?id=' + this.text.id+ '&pid=' + this.userInfo.id
			return {
				title: this.text.title,
				path: path,
				imageUrl: this.text.image,
			}
		},
		methods: {
			async getuserInfo() {
				var res = await this.$api.mine.index()
				this.userInfo = res
			},
			async getData(id) {
				const data = await this.$api.technicianadd.articleInfo({
					id: id
				})
				console.log(data, 'data');
				this.textInfo = data
			},
			popShow(index) {
				if (index == 0) {
					this.give()
				}
				if (index == 1) {
					this.collect()
				}
				if (index == 2) {
					this.showPopup = true
				}
			},
			bindTextAreaBlur(e) {
				this.summary = e.detail.value
			},
			dianji() {
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: this.textInfo.image,
					title: this.textInfo.title,
					summary: this.summary,
					miniProgram: {
						id: this.id,
						path: '/technicianadd/pages/text/text',
						type: 0,
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			async collect() {
				const data = await this.$api.technicianadd.articleCollect({
					article_id: this.id
				})
				uni.showToast({
					icon:'none',
					title:data
				})
				if(this.textInfo.is_collect == 0){
					this.textInfo.is_collect = 1
					return
				}
				if(this.textInfo.is_collect == 1){
					this.textInfo.is_collect = 0
					return
				}
				
			},
			async give() {
				const data = await this.$api.technicianadd.zanArticle({
					article_id: this.id
				})
				uni.showToast({
					icon:'none',
					title: data
				})
				if(this.textInfo.is_zan == 0){
					this.textInfo.is_zan = 1
					return
				}
				if(this.textInfo.is_zan == 1){
					this.textInfo.is_zan = 0
					return
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 32rpx;
		background-color: #ffffff;
		height: calc(100vh - 112rpx);
		overflow-y: auto;

		.left {
			margin-bottom: 32rpx;

			.prolife {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 108rpx;
					height: 108rpx;
				}
			}

			.info {
				.title {}

				.time {
					color: #999999;
				}
			}
		}

		.btnB {
			color: #2c2c2c;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;

			.box {
				padding: 32rpx;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;

				.item:nth-child(2) {
					border-left: 2rpx solid #dddddd;
					border-right: 2rpx solid #dddddd;

					.icon {
						width: 42rpx;
						height: 42rpx;

						image {
							width: 42rpx;
							height: 42rpx;
						}
					}
				}

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;

					.icon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.title {}
				}
			}
		}

		.popup {
			padding: 27rpx 40rpx;

			.title {
				margin-bottom: 21rpx;
			}

			.des {
				margin-bottom: 61rpx;
			}

			.left {
				justify-content: space-between;
				margin-bottom: 21rpx;

				.describe {
					width: 140rpx;
				}

				.container {
					color: #666666;
					flex: 1;
					text-align: end;
				}
			}

			.text {
				display: flex;
				flex-direction: column;
				margin-bottom: 55rpx;

				.describe {
					margin-bottom: 21rpx;
				}

				.uni-textarea {
					min-height: 181rpx;
					background: #7E7E7E30;
					border-radius: 20rpx;
					padding: 27rpx 24rpx;
				}
			}

			.btn {
				height: 80rpx;
				background: linear-gradient(0deg, #24B682 0%, #97DD97 100%);
				border-radius: 100rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
	.text{
		width: 100%;
		img{
			width: 100%;
		}
	}
</style>